• Client-Side Events
• Action Javascript
• Javascript Actions
• Aliases & Placeholders
• {dialog.object} Methods
• Extending {dialog.object}
• Modifying Action Javascript Code
• Client Side Expressions, Validation, and Calculated Fields
• Import External Javascript
• Testing & Debugging

 

Import External Javascript

Description

Javascript can be loaded in the UX Component by including it in the Javascript Files property or importing it on demand.

External javascript files can be included in your UX component via the Javascript Files property. Files listed in Javascript Files will be loaded into the browser when the UX component is loaded, and you can reference code in them anywhere in your UX component. The javascript file path can be specified using either a relative or absolute path name. Unless you're referencing javascript files hosted on another server, the javascript files must include the web project so they are published alongside your UX component.

Files listed in the Javascript Files property are loaded asynchronously and are therefore not guaranteed to be loaded in a specific order. They're also not guaranteed to be loaded before the UX component is rendered. Since you have no control over how the files are loaded with the Javascript Files property, loading a set of files with order dependencies can present problems. To solve this, javascript files can be loaded using {dialog.object}.loadJavascriptFile().

{dialog.object}.loadJavascriptFile() will load a javascript file and then make a (optional) callback to a user-defined function after the file has loaded. The callback can be used to specify another javascript file to load or run any initialization operations that need to happen after the file has loaded. The callback is optional and can be omitted. Loading multiple javascript files can be serialized using a combination of callbacks and {dialog.object}.loadJavascriptFile() operations.

function loadJsFile3() {
    {dialog.object}.loadJavascriptFile('javascript/script3.js');
}

function loadJsFile2() {
    {dialog.object}.loadJavascriptFile('javascript/script2.js',loadJsFile3);
}

function loadJsFiles() {
    {dialog.object}.loadJavascriptFile('javascript/script1.js',loadJsFile2);
}

loadJsFiles();

Code loaded using {dialog.object}.loadJavascriptFile() will not be available until after the files have finished loading. Depending on when you load your javascript files, the code within them may not be available in all Client-Side events for the UX component. The callback can be used to finish initializing controls dependent on the javascript file or setup any properties or objects that are required before the javascript file can be used.

function loadingComplete() {
    var msg = "Javascript files have finished loading";
    alert(msg);
}

{dialog.object}.loadJavascriptFile('javascript/messages.js',loadingComplete);